<template>
  <view class="ssp-my-supply-group">
    <!-- 已登录 -->
    <ScrollList
        v-if="isLogin"
        ref="scrollView"
        :scrollAnimation="false"
        isFixed
        @interrupt="interrupt"
        @scrolltolower="scrolltolower"
    >
      <template slot="content">
        <!-- 头部数据展示 -->
        <view class="data-wrap">
          <DataComponent type="2" :card-data="cardData" />
        </view>
        <!-- 分割区域 -->
        <view class="line-section"></view>
        <!-- 帮卖赚钱+选品中心区域 -->
        <view class="quick-wrap">
          <view class="quick-item">
            <QuickHelpSell :list="quickHelpSells" />
          </view>
          <view class="quick-item">
            <QuickSelectCenter :list="QuickSelectCenters" />
          </view>
        </view>
        <!-- 分割区域 -->
        <view class="line-section"></view>
        <!-- 推荐赚奖金 -->
        <view class="recommend_box justify-between items-center u-m-b-24" @click="navigateTo({url: '/pagesA/supplyGroups/recommendEarningBonus'})">
          <view class="recommend_box_l u-p-t-32 u-p-b-32">
            <view class="fz-18 fw6 viceColorN8 linh-24">一键推荐<text class="viceColorN9">赚奖金</text></view>
            <view class="items-center u-m-t-8">
              <text class="viceColor u-m-r-16 linh-20">轻松赚取更多奖金</text>
              <text class="btn_box themeBgColor items-center" style="color: #fff;">去推荐<text class="iconfont icon-arrow_right fz-12 linh-20"></text></text>
            </view>
          </view>
          <view class="recommend_box_r"><image class="img_box" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/purse_img.png" alt=""></view>
        </view>
        <!-- 帮卖列表nav -->
        <view class="sticky-wrap">
          <TitleInput type="2" isBorder @searchFn="handleSearch" />
          <SortField @change="changeSort" :tabList="tabList"/>
        </view>
        <!-- 供货列表 -->
        <SupplyGroupList v-if="list.length" :list="list" @customRecommend="customRecommend" />
        <!-- 缺省状态 -->
        <view v-else-if="!list.length&&isEmpty" :style="{height: 'calc(100vh - '+emptyHeight+'px)'}">
          <DefaultPage type="2" tips="暂时没有人给你供货哦～" />
        </view>
      </template>
    </ScrollList>
    <!-- 未登录-缺省页 -->
    <view v-else>
      <!-- 头部数据展示 -->
      <DataComponent type="2" :card-data="cardData" />
      <view :style="{height: 'calc(100vh - '+noEmptyHeight+'px)'}" class="no-login-wrap">
        <DefaultPage
            type="2"
            tips="登录后查看更多优质内容"
            configText="了解速速团"
        />
      </view>
    </view>
    <!-- 邀请他人成别供货帮卖 -->
    <InviteOthersToHelpSell :show="isInviteOthersShow" :helpSellData="helpSellData" @closeInviteOthersFn="closeInviteOthersFn" @returnSharedDataFn="returnSharedDataFn" />
    <!-- toast提示 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import ScrollList from '@/components/scrollList/index.vue'
import DataComponent from './components/dataComponent.vue'
import TitleInput from './components/titleInput'
import QuickHelpSell from './components/quickHelpSell'
import QuickSelectCenter from './components/quickSelectCenter'
import SupplyGroupList from './components/supplyGroupList'
import DefaultPage from '@/components/defaultPage/index.vue'
import helpSellApi from '@/api/helpSellGroups.js'
import SortField from './components/sortField'

//邀请他人成别供货帮卖
import InviteOthersToHelpSell from "@/components/inviteOthersToHelpSell/index.vue"

export default {
  name: 'mySupplyGroup',
  components: {
    ScrollList,
    DataComponent,
    TitleInput,
    QuickHelpSell,
    QuickSelectCenter,
    DefaultPage,
    SupplyGroupList,
    SortField,
    InviteOthersToHelpSell
  },
  data() {
    return {
      // 卡片数据
      cardData: {
        todayHelpSellCommission: 0, // 今日佣金
        todayHelpSellOrderAmount: 0, // 今日已卖
        todayHelpSellOrderCount: 0, // 今日订单
        totalHelpSellCommission: 0, // 我已获佣金
      },
      params: {
        groupNickname: '', // 帮卖团长昵称
        pageSize: 10,
        currentPage: 1,
        sortField: 1, // 1:帮卖佣金,2:帮卖金额,3:推荐奖金4推荐人数
        sortType: 2, // 1:顺序,2:倒叙
      },
      quickHelpSells: [], // 帮卖赚钱--两个数据
      QuickSelectCenters: [], // 选品中心--两个数据
      list: [], // 供货列表数据
      listMore: true, // 当前列表是否还有更多
      isEmpty: false, // 是否显示空状态--配合list的长度使用，避免在页面一开始加载时先显示了空状态
      tabList: [{name: '帮卖佣金', sort: 1}, {name: '帮卖金额', sort: 2}, {name: '推荐奖金', sort: 3}, {name: '推荐人数', sort: 4}],
      helpSellData: {},  // 邀请帮卖邀请好友赚奖金数据
      isInviteOthersShow: false, // 邀请他人成别供货帮卖弹窗组件
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    },
    // 空状态的高度
    emptyHeight() {
      const {  navHeight, navBottom } = this.$store.state.globalData
      return navHeight + navBottom + 483 // 483
    },
    noEmptyHeight() {
      const { navHeight, navBottom } = this.$store.state.globalData
      return navHeight + navBottom + 241
    },
    navHeight() {
      const { navHeight } = this.$store.state.globalData
      return navHeight
    },
  },
  methods: {
    // 把绘制好的分享数据信息返回到页面上去分享
    returnSharedDataFn (data) {
      this.$emit('returnSharedDataFn',data)
    },
    // 获取我的供货卡片数据
    getCardData() {
      helpSellApi.getSupplyCard().then(res => {
        if (res.code === 200) {
          this.cardData = res.data
          this.quickHelpSells = res.data.helpSellEarnDynamicRespVOList || []
          this.QuickSelectCenters = res.data.selectionVOList || []
        }
      })
    },
    // 获取供货列表
    getList() {
      helpSellApi.getSupplyList(this.params).then(res => {
        if (this.params.currentPage === 1) {
          this.list = res.data.records || []
          // 显示空状态
          if (!this.list.length) {
            this.isEmpty = true
            this.$refs.scrollView && this.$refs.scrollView.loadFinish(3,0)
          }
        } else {
          this.list = this.list.concat(res.data.records || [])
        }
        // 无更多标识
        if ((this.params.currentPage * this.params.pageSize) !== this.list.length) {
          this.listMore = false
          this.$refs.scrollView.loadFinish(3,0)
        }
      }).catch(() => {
        this.$refs.scrollView.loadFinish(3,0)
      })
    },
    // 搜索
    handleSearch(val) {
      this.params.groupNickname = val
      this.params.currentPage = 1
      this.listMore = true

      this.scrollDiffSticky()
      this.getList()
    },
    interrupt() {
      this.listMore = true
      this.params.currentPage = 1
      this.getCardData()
      this.getList()
      setTimeout(() => {
        this.$refs.scrollView && this.$refs.scrollView.refreshFinish() // 刷新完成
      }, 400)
    },
    // 筛选
    changeSort({ sortField, sortType }) {
      this.params.currentPage = 1
      this.listMore = true
      this.params.sortField = sortField
      this.params.sortType = sortType
      this.scrollDiffSticky()
      this.getList()
    },
    // 当sticky-wrap盒子距离顶部的top距离小于等于navHeight时，触发
    async scrollDiffSticky() {
      // 获取sticky-wrap盒子距离顶部的top距离
      const { top } = await this.getUNavbarHeight('.sticky-wrap')
      if (top <= this.navHeight) {
        // 滚动到指定位置
        const dataDom = await this.getUNavbarHeight('.data-wrap')
        const quickDom = await this.getUNavbarHeight('.quick-wrap')
        const recommendDom = await this.getUNavbarHeight('.recommend_box')
        const scrollTop = dataDom.height + quickDom.height + recommendDom.height + 36
        this.$refs.scrollView && this.$refs.scrollView.goToScroll(scrollTop)
      }
    },
    scrolltolower() {
      if (this.isLogin) {
        ++this.params.currentPage
        this.getList()
        this.$refs.scrollView && this.$refs.scrollView && this.$refs.scrollView.loadFinish(this.listMore ? 0 : 3) // 加载完成
      }
    },
    closeInviteOthersFn () {
      this.isInviteOthersShow = false
    },
    customRecommend(data) {
      // isOpenRecommendBonus是否打开推荐奖金:0否1是
      this.helpSellData = data
      // console.log(this.helpSellData,'___helpSell——')
      if (this.helpSellData.isOpenRecommendBonus==1) {
        this.isInviteOthersShow = true
      }
      if (this.helpSellData.isOpenRecommendBonus==0) {
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.ssp-my-supply-group {
  height: 100%;
  .line-section {
    width: 100%;
    height: 12px;
    background-color: #F7F8FA;
  }
  .quick-wrap {
    display: flex;
    width: 100%;
    height: 300rpx;
    background-color: #FFFFFF;
  }
  .quick-item {
    width: 50%;
    height: 100%;
  }
  .sticky-wrap {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 999;
  }
  .no-login-wrap {
    background-color: #F7F8FA;
  }
  .recommend_box {
    padding: 0 40rpx;
    background: #fff;
    .recommend_box_l{
      .btn_box {
        padding: 0rpx 12rpx 0 16rpx;
        border-radius: 100rpx;
        font-size: 24rpx;
        line-height: 40rpx;
      }
    }
    .recommend_box_r {
      .img_box {
        width: 160rpx;
        height: 160rpx;
      }
    }
  }
}
</style>